<template>
    <div class="Agencdetails">

        <!-- <div class="conetent-nav">
            <div class="conetent-nav-head">
                <img src="/images/logo.png" class="logo1" @click="Goindex()">
                <ul>
                    <li v-for="(item,index) in tablesList" :key="index" :class="tablesListindex ==index?'selctestye':''" @click="checket(index)">{{item}}</li>
                    <li class="conetent-nav-my-center" >
                        <div class="login" v-if="IsLogins">
                        <el-menu class="el-menu-demo" mode="horizontal">
                            <el-submenu index="2" style="bockground:none;margin-top:-25px">
                            <img :src="avatar" slot="title" alt="" class="title"/>
                            <el-menu-item @click="Topersonil">个人中心</el-menu-item>
                            <el-menu-item @click="Logout">退出登录</el-menu-item>
                            </el-submenu>
                        </el-menu>
                        </div>
                        <div class="login" v-else>
                        <button @click="GoLogin" style="margin-left:14px;">登录</button>
                        <button @click="outerVisible = true">注册</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div> -->
        <!-- <div class="Live-Cl-De-nav">
            <div class="Live-Cl-De-nav-logo">
                <img src="/images/logo.png" @click="checket()"/>
            </div>
            <div class="Live-cl-de-nav-right">
                <ul>
                    <li v-for="(item,index) in tablesList" :key="index" :class="tablesListindex ==index?'selctestye':''" @click="checket(index)">{{item}}</li>
                    <li class="conetent-nav-my-center">
                        <div class="login" v-if="IsLogins">
                        <el-menu class="el-menu-demo" mode="horizontal">
                            <el-submenu index="2">
                            <img slot="title" alt="" class="title userAvatar" :src="avatar"/>
                            <el-menu-item @click="Topersonil">个人信息</el-menu-item>
                            <el-menu-item @click="Logout">退出登录</el-menu-item>
                            </el-submenu>
                        </el-menu>
                        </div>
                        <div class="login" v-else>
                        <button @click="GoLogin">登录</button>
                        <button @click="outerVisible = true">注册</button>
                        </div>
                    </li>
                    
                </ul>
            </div>
        </div> -->
        <div class="Ag-conetnt" style="margin-top:80px;">
            <div class="Ag-conetnts">
                <div class="Hader">
                    <h3>{{mechanism_name}}</h3>
                    <div class="Headers">
                        <div>
                            <div class="swiper-container gallery-top">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(swiperitem,swiperindex) in  imageData" :key="swiperindex" :style="{backgroundImage: 'url(' + swiperitem + ')'}"></div>
                                </div>
                                <div class="swiper-button-next swiper-button-white"></div>
                                <div class="swiper-button-prev swiper-button-white"></div>
                            </div>
                            <div class="swiper-container gallery-thumbs">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(swiperitem,swiperindex) in  imageData" :key="swiperindex" :style="{backgroundImage: 'url(' + swiperitem + ')'}"></div>
                                </div>
                            </div>
                        </div>
                        <div class="yum">
                            <div class="yum-head">
                                <label>
                                    <img :src="institutionslogo" alt="">
                                </label>
                                <label>
                                    <p>{{institutionsmobile}}</p>
                                    <p>{{institutionsaddre}}</p>
                                </label>
                            </div>
                            <div class="maps">
                                <div id="map"></div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="introduced">
                    <h4>详情介绍</h4>
                    <p>{{mechanism_advantage}}</p>
                </div>
                <div class="faculty">
                    <h4>师资力量（{{faculty.length}}）</h4>
                    <ul v-if="faculty.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无老师</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(facultyitem,facultyindex) in faculty" :key="facultyindex" @click="toDetails(facultyitem)">
                            <div class="boxs">
                                <img :src="facultyitem.map.userinfo.avatar" alt="">
                                <span>{{facultyitem.map.userinfo.nick_name}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="facultys">
                    <h4>VIP体验课（{{Soldincourse.length}}）</h4>
                    <ul v-if="Soldincourse.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无体验课程</span>
                        </label>
                    </ul>
                    <el-row v-else>
                        <el-col :span="8" v-for="(Solditem, Soldindex) in Soldincourse" :key="Soldindex" :offset="1" @click.native="todeilal(Solditem)">
                            <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img :src="Solditem.cover" class="image">
                            <div style="padding: 14px;">
                                <span class="facultys-title">{{Solditem.title}}</span>
                                <label class="facultys-price">
                                    <span>￥{{Solditem.discount_amout}}</span>
                                    <span>￥{{Solditem.amout}}</span>
                                </label>
                                <div class="bottom clearfix">
                                    <el-button type="text" class="button">{{Solditem.type}}</el-button>
                                    <span>已有{{Solditem.connect_peoplenum}}人购买</span>
                                </div>
                            </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
                <div class="Lvie-cl-de-con-pagination">
                    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="Soldincourse.length"></el-pagination>
                </div>
            </div>
        </div>
        <div v-show="Coursetoshow">
                <div class="login1" v-if="cusreinfos !=''">
                    <div class="popupcontents">
                        <div class="covers">
                            <img :src="cusreinfos.cover" alt="">
                        </div>
                        <div class="tisy">
                            <h6>{{cusreinfos.title}}</h6>
                            <span>已有{{cusreinfos.connect_peoplenum}}人购买</span>
                        </div>
                        <div class="cursetyoe">
                        <span>{{cusreinfos.type}}</span> 
                        </div>
                        <div class="teach_program">
                            <h6>教学大纲</h6>
                            <span>{{cusreinfos.teach_program}}</span>
                        </div>
                        <div class="teach_program">
                            <h6>授课机构</h6>
                            <div class="incginfo"> 
                                <label v-if="cusreinfos.map.masterMechanismEntity.mechanism_logo !=undefined">
                                    <img :src="cusreinfos.map.masterMechanismEntity.mechanism_logo" alt="">
                                </label>
                                <label>
                                    <span>{{cusreinfos.map.masterMechanismEntity.mechanism_name}}</span>
                                    <span>{{cusreinfos.map.masterMechanismEntity.mechanism_telephone}}</span>
                                    <span>{{cusreinfos.map.masterMechanismEntity.mechanism_addr}}</span>
                                </label>
                            </div>
                        </div>
                        <div class="teach_program">
                            <h6>课程详情</h6>
                            <span>{{cusreinfos.introduction_content}}</span>
                            <ul class="thecoursedetails">
                                <li v-for="(itme3,index3) in Coursedetails" :key="index3">
                                    <el-image 
                                        style="width: 100px; height: 100px"
                                        :src="itme3" 
                                        :preview-src-list="Coursedetails"
                                        class="elimg">
                                    </el-image>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="over1" @click="toclose"></div>
            </div>
    </div>
</template>
<script>
import Footer from '../../components/footer'
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
    name:'Agencdetails',
    data(){
        return{
            LenavList:['直播课堂','场景直播'],
            LenavListIndex:this.$route.query.tablesListindex,
            id:this.$route.query.id,
            imageData: ['/images/轮播1.png','/images/轮播2.png','/images/轮播3.png','/images/4.png','/images/轮播5.png'],
            IsLogins:true,
            faculty:[],
            institutionslogo:'',
            institutionsmobile:'',
            institutionsaddre:'',
            mechanism_advantage:'',
            mechanism_name:'',
            latitude:this.$route.query.latitude,
            longitude:this.$route.query.longitude,
            Soldincourse:[],
            currentPage:1,
            tablesList:['主页','学习中心','教学中心','直播课堂','场景直播','客户端下载'],
            tablesListindex:10,
            userinfo:JSON.parse(localStorage.getItem('userinfo')),
            avatar:'',
            Coursetoshow:false,
            cusreinfos:'',
            Coursedetails:[],
        }
    },
    created(){
        let _this = this
        _this.avatar = _this.userinfo.avatar
        
    },
    mounted() {
        var _this = this
        this.getDETIALS() 
        this.getsale()
        this.Getteachers()
        
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            }
        });
        var map = new BMap.Map("map");    // 创建Map实例
        var point = new BMap.Point(_this.longitude,_this.latitude);
        map.centerAndZoom(point, 40);  // 初始化地图,设置中心点坐标和地图级别
        var geoc = new BMap.Geocoder()
        geoc.getLocation(point, function(rs){
            console.log(point)
			var addComp = rs.addressComponents;
          	map.addOverlay(new BMap.Marker(point));
		});    
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	
        _this.toTop()
        if(this.userinfo ==null){
            _this.IsLogins = false
        }else{
            _this.IsLogins = true
        }
    },
    components: {//组件注册
        Footer,
    },
    methods:{
        todeilal(item){
            this.cusreinfos =item
            console.log(this.cusreinfos)
            this.Coursedetails = item.map.masterMechanismEntity.support_means.split(',')
            console.log(this.Coursedetails,'0000')
            this.Coursetoshow = true
        },
        toclose(){
            this.Coursetoshow = false
        },
        toDetails(e){
            console.log('跳转到个人详情',e.user_id)
            console.log(this.IsLogins)
            if(this.IsLogins){
                this.$router.push({path:'/views/Teachingcenters/Teachersdetails',query: {userid: e.user_id}})
            }else{
                this.$message('请先登录在查看')
            }
        },
        toTop() {
            let top = document.documentElement.scrollTop || document.body.scrollTop;// 实现滚动效果 
            const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                if (top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);
        },
        Topersonil(){
            this.$router.push({name:'Modifydata',params: {id: 0}})
        },
        checket(e){
            this.tablesListindex = e
            localStorage.setItem("tablesListindex",this.tablesListindex)
            if( this.tablesListindex == 0){
                this.$router.push({path:'/'})
            }else if(this.tablesListindex == 1){
                this.$router.push({path:'/views/Learningcenter/Liveclassroom',query: {index: 1}})
            }else if(this.tablesListindex == 2){
                this.$router.push({path:'/views/Teachingcenters/Livelectureinstructor',query: {index: 2}})
            }else if (this.tablesListindex ==3){
                this.$router.push({path:'/views/Liveclassroom/ClassRoomInfo',query: {index: 3}})
            }else if(this.tablesListindex == 4){
                this.$router.push({path:'/views/LiveScene/SceneRoomInfo',query: {index: 4}})
            }else if(this.tablesListindex == 5){
                this.$router.push({ path: "/views/Download",query: {index: 5}});
            }else if(this.tablesListindex == 7){
                console.log(this.Isend)
                if(this.Isend ==true){
                    this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:true}})
                }else if(this.Isend ==false){
                    this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:false}})
                }
            }
        },
        getDETIALS(){
            var data={
                id:this.id
            }
            this.$axios({
                method: "get",
                url:"http://101.37.66.151:8768/eg-api/user/mastermechanism/queryMechanismListPage",
                params: data}).then(res => {
                res.data.data.forEach(e => {
                    this.institutionslogo =e.mechanism_logo
                    this.institutionsmobile = e.mechanism_telephone
                    this.institutionsaddre = e.mechanism_addr
                    this.mechanism_advantage = e.mechanism_advantage
                    this.imageData = e.introduction_pic.split(',')
                    this.mechanism_name =e.mechanism_name
                });
            }).catch(error => {
                console.log(error);
            });
        },
        getsale(){//在售课程
            var data = {
                mechanism_id:this.id,
                pageSize:10,
                currentPage:this.currentPage
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryMechanismAppointmentListPage',
                params:data,
            }).then((res) =>{
                this.Soldincourse =res.data.data
                console.log(this.Soldincourse,'88')
                this.Soldincourse.forEach(e=>{
                    if(e.type == "jointly_class"){
                        e.type = "联名课程"
                    }else if(e.type == "mechanism_offline"){
                        e.type = "线下课程"
                    }
                })
            }).catch((error) =>{
                console.log(error)
            })
        },
        Getteachers(){//老师
            var data = {
                mechanism_id:this.id,
                pageSize:12,
                currentPage:this.currentPage,
                status:2,
                is_all:true,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryMechanismMasters',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'老师信息')
                this.faculty = res.data.data
            }).catch((error) =>{
                console.log(error)
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getsale()
            // this.getClassAge()
        }
    }
}
</script>
<style lang="less" scoped>
.elimg{
    /deep/.el-icon-circle-close {
      color: white;
    }
}
.thecoursedetails{
        display: flex;
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        li{
            margin-left: 20px;
        }
    }
.incginfo{
        position: relative;
        width: 100%;
        margin: 0 auto;
        height: 80px;
        margin-top: 20px;
        background: #eeeeee;
        border-radius: 10px;
        display: flex;
        align-items: center;
        img{
            width: 60px;
            height: 60px;
            border-radius: 10px;
            cursor: pointer;
        }
        label{
            display: flex;
            flex-wrap: wrap;
            cursor: pointer;
            &:nth-child(2){
                margin-left: 20px;
            }
           span{
               width: 100%;
                color: #000;
                margin: 4px;
           }
        }
    }
.teach_program{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        margin-top: 20px;
        flex-wrap: wrap;
        h6{
            width: 100%;
            margin: 0;
            font-size: 14px;
        }
        span{
            font-size: 12px;
            color: #eaeaea;
            margin-top: 20px;
        }
    }
.cursetyoe{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        margin-top: 20px;
        span{
            width:71px;
            height:24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid rgba(255,157,61,1);
            color: #FF9D3D;
            border-radius:12px; 
            font-size: 12px;
        }
    }
.tisy{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        margin-top: 20px;
      h6{
          margin: 0;
          font-size: 14px;
      }
      span{
          margin-left: auto;
          font-size: 12px;
          color: #e6e6e6;
      }
  }
.covers{
      img{
          width: 400px;
          height: 200px;
      }
     
  }
.popupcontents{
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  .popupcontents>#map{
    width: 1063px;
    height: 576px;
    overflow: hidden;
    border-radius: 20px;
  }
.login1 {
    position: fixed;
    font-size: 24px;
    height: 700px;
    width: 400px;
    border-radius:10px;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2405;
  }
  .over1{
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 1002;
    background-color: #111111;
  }
.title{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.logo1{
    width: 200px;
    height: 34px;
    cursor: pointer;
}
.selctestye{
    color: red;
    background:rgba(39,180,181,1);
}
.conetent-nav{
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0px;
    z-index: 2;
    background: #47CECF;
    
}
.conetent-nav-head{
    position: relative;
    width: 1400px;
    height: 100%;
    margin:  0 auto;
    display: flex;
    align-items: center;
}
.conetent-nav-head>ul{
    display: flex;
    list-style: none;
    width: 60%;
    height: 80px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.conetent-nav-head>ul>li{
    flex: 1;
    height: 100%;
    line-height: 80px;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    cursor: pointer;
}
.conetent-nav-head>ul>li:last-child{
    display: flex;
    align-items: center;
    justify-content: center;
}
.conetent-nav-info{
    width: 25px;
    height: 25px;
    margin-top: 26px;
}
.conetent-nav-my-center{
    text-align: center;
    margin-left: 4%;
}
.conetent-nav-my-center /deep/ .el-menu-demo{
    width: 100%;
    background: none;
}
.conetent-nav-my-center /deep/.el-submenu__title{
    width:120px!important;
    height:35px!important;
    background:rgba(255,255,255,1);
    border-radius:18px;
    margin-top: 20px!important;
    line-height: 40px!important;
    color: #64C6C9!important;
}
.userAvatar{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        position: relative;
        top: -2px;
    }
.login {
        width: 100%;
        height: 40px;
        display: flex;
        /deep/ .el-menu-demo {
            // width: 100%;
            background: none;
            margin-top: -20px;
            border: none;
            margin-left: auto;
            /deep/ .el-submenu__title{
                background: none;
                margin-left: 100px;
            }
            /deep/ .el-submenu__title:hover{
                background: none;
            }
        }
    }
.login /deep/.el-submenu__title {
  width: 120px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  line-height: 40px !important;
  color: #64c6c9 !important;
}
    .login button {
  width: 91px;
  height: 35px;
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  border: none;
  margin-left: 10px;
  color: #64c6c9;
  cursor: pointer;
  outline: none;
}
.login button:last-child {
  background: none;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.Agencdetails{
    position: relative;
    width: 100%;
}
    .Live-Cl-De-nav{
        position: relative;
        width: 100%;
        height: 80px;
        background: #47CECF;
        display: flex;
        justify-content: center;
        align-items: center;
        div{
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .Live-Cl-De-nav-logo{
        width: 30%;
        cursor: pointer;
    }
    .Live-cl-de-nav-right{
        width: 60%;
        ul{
            display: flex;
            list-style: none;
            width: 100%;
            height: 100%;
            align-items: center;
            li{
                width: 15%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFFFFF;
                cursor: pointer;
                margin-left: 2%;
                span{
                    position: relative;
                    width: 100%;
                    height: 43.75%;
                    border:1px solid rgba(255,255,255,1);
                    border-radius:15px;
                    text-align: center;
                    line-height: 200%;
                }
            }
        }
    }
    .chetcs{
        background:rgba(39,180,181,1);
    }
    .Live-cl-de-nav-right-serch{
        input{
            position: relative;
            width: 100%;
            height: 43.75%;
            border:1px solid rgba(255,255,255,1);
            border-radius:15px;
            outline: none;
            padding-left: 4%;
        }
    }
    .thelogin{
        height: 40px!important;
        width: 20%!important;
        border-radius: 15px;
        /deep/.el-submenu__title{
            height: 40px!important;
            line-height: 40px!important;
            border-radius: 15px;
        }
    }
    .thelogin>div>ul>li{
        height: 40px!important;
        width: 100%!important;
        border-radius: 15px;
    }
    .thelogin>div>ul{
        border-radius: 15px;
    }
    

    //内容样式
    .Ag-conetnt{
        position: relative;
        width: 100%;
        margin: 0 auto;
        background: #eeeeee;
        display: flex;
        padding-top: 30px;
        padding-bottom: 100px;
    }
    .Ag-conetnts{
        position: relative;
        width: 1400px;
        margin: 0 auto;
        background: #ffffff;
        height: auto;
    }

    //机构图片介绍
    .Hader{
        position: relative;
        width: 90%;
        margin: 0 auto;
        padding-top: 40px;
        h3{
            font-size: 26px;
            font-weight: 1000;
        }
    }
    //轮播图样式
    .Headers{
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .swiper-container {
      width: 100%;
      height: 315px;
      margin: 0;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      height: 315px;
      width: 758px;
    }
    .gallery-thumbs {
      height: 125px;
      width: 758px;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }
    .yum{
        position: relative;
        width: 470px;
        height: 450px;
    }
    .yum-head{
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        label{
            &:last-child{
                margin-left: 20px;
                span{
                    color: #2A2A2A;
                    font-size: 16px;
                }
            }
        }
        img{
            width: 77px;
            height: 77px;
        }
    }
    .maps{
        position: relative;
        width: 100%;
        margin-top: 40px;
        #map{
            width: 100%;
            height: 301px;
        }
    }
    //结束
    .introduced,.faculty,.facultys{
        position: relative;
        width: 90%;
        margin: 0 auto;
        padding-top: 40px;
        h4{
            color: #2A2A2A;
            font-size: 16px;
        }
        p{
            color: #C9C9C9;
            font-size: 14px;
            line-height: 24px;
        }
    }
    .faculty>ul{
        display: flex;
        width: 100%;
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        li{
            width: 144px;
            height: 180px;
            margin-left: 20px;
            margin-left: 20px;
            margin-top: 47px;
            // &:first-child{
            //     margin: 0%;
            // }
            img{
                width: 144px;
                height: 180px; 
            }
        }
    }
    .boxs{
        display: flex;
        flex-wrap: wrap;
        span{
            display: inline-block;
            width: 100%;
            text-align: center;
            margin-top: 20px;
            font-size: 18px;
        }
        img{
            border-radius: 15px;
        }
    }
    .facultys>.el-row{
        padding-bottom: 100px;
    }
    .facultys>.el-row>.el-col{
        width: 235px;
        margin-left: 20px;
        margin-top: 30px;
        &:nth-child(1),&:nth-child(6){
            margin-left: 0;
        }
    }
    .Lvie-cl-de-con-footer{
        padding-top: 100px;
    }
    .el-card__body>img{
        width: 100%;
        height: 157px;
        overflow: hidden;
    }
    .facultys-title{
        display: block;
        width: 100%;
        color: #555555;
        font-size: 18px;
        font-weight: bold;
    }
    .facultys-price{
        display: block;
        width: 100%;
        margin-top: 10px;
        span{
            &:first-child{
                color: #FA5353;
                font-size: 18px;
            }
            &:last-child{
                color: #CDCDCD;
                margin-left: 20px;
                text-decoration: line-through;
            }
        }
    }
    .bottom{
        position: relative;
        width: 100%;
        margin-top: 10px;
        display: flex;
    }
    .bottom>span{
        margin-left: 20px;
        color: #CDCDCD;
        font-size: 14px;
    }
    .button{
        width:71px;
        height:24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border:1px solid rgba(255,157,61,1);
        color: #FF9D3D;
        border-radius:12px;
        span{
            line-height: 24px;
        }
    }
    .nodates{
        position: relative;
        width: 100%;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            width: 100%;
            text-align: center;
            flex-wrap: wrap;
            img{
                width: 63px;
                height: 51px;
            }
        }
        span{
            display: inline-block;
            width: 100%;
            color: #e7e7e7;
            margin-top: 10px;
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
</style>